<template>
    <div class="footer">
        <nut-tabbar @tab-switch="tabSwitch" v-model:visible="current">
            <nut-tabbar-item tab-title="首页" icon="home" to="/home"></nut-tabbar-item>
            <nut-tabbar-item tab-title="分类" icon="category" to="/category"></nut-tabbar-item>
            <nut-tabbar-item tab-title="发现" icon="find" to='/find'></nut-tabbar-item>
            <nut-tabbar-item tab-title="购物车" icon="cart" to='/cart'></nut-tabbar-item>
            <nut-tabbar-item tab-title="我的" icon="my" to="/my"></nut-tabbar-item>
        </nut-tabbar>
    </div>
</template>

<script>
import { ref,reactive,toRefs,onBeforeMount,onMounted} from 'vue'
import {useRoute} from "vue-router"
export default {
    setup() {
        let route=useRoute()
        const data = reactive({
            routers:['home','category','find','cart','my']
        })
        let current=ref(0)

        const tabSwitch=(item, index)=>{
            console.log(item, index);
        }
        onMounted(()=>{
            console.log(route.name);
            current.value=data.routers.findIndex(item=>{
                return item==route.name
            })
        })

        const refData = toRefs(data);
        return {
            ...refData,tabSwitch,current
        }
    }
};
</script>
<style scoped lang="scss">
.footer{
    position: fixed;bottom: 0;left: 0;width: 100vw;height: 50px;
    .nut-tabbar{height: 100%;}
}
</style>